<template>
    <div class="chart" v-loading="loading">
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>门店问题频次排行</span>
                </div>
            </template>
            <div id="storeProblemChart" class="chartsBox" v-show="isShowChart"></div>
            <el-empty description="暂无数据" v-show="!isShowChart"/>
        </el-card>
    </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { shopRanking } from '@/api/bigData/storeInspection.js';
const storeProblemChart = shallowRef(null)
const loading = ref(false)
const isShowChart = ref(false)
defineExpose({getData})

function getData(data) {
    loading.value = true;
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: '30',
            bottom: '30',
            left: '30',
            right: '30',
            containLabel: true
        },
        xAxis: {
            show: false
        },
        yAxis: {
            type: 'category',
            data: [],
            axisTick:{
                show:false // 不显示坐标轴刻度线
            },
            axisLine: {
                show: false, // 不显示坐标轴线
            },
            splitLine:{
                show:false // 不显示网格线
            },
        },
        series: [
            {
                type: 'bar',
                data: [],
                label: {
                    show: true,
                    position: 'right',
                    valueAnimation: true
                }
            },
        ]
    };
    let url = `/intelligent/store/shopRanking?serviceId=${toRaw(data).serviceId}&shopId=${toRaw(data).shopId}&startDateTime=${toRaw(data).startDateTime}&endDateTime=${toRaw(data).endDateTime}`
    shopRanking(url).then(res=>{
        if(res.data?.problemRankingList?.length) {
            isShowChart.value = true;
            nextTick(() => {
                storeProblemChart.value = echarts.init(document.getElementById('storeProblemChart'));
                option.yAxis.data = res.data.problemRankingList.map((item)=>{
                    return item.typeName
                })
                option.series[0].data = res.data.problemRankingList.map((item)=>{
                    return item.value
                })
                storeProblemChart.value.setOption(option)
                window.addEventListener('resize', ()=>{
                    setTimeout(() => {storeProblemChart.value.resize();},100)
                })
                loading.value = false
            })
        }else{
            loading.value = false;
            isShowChart.value = false
        }
    })
}
</script>
<style lang="scss" scoped>
.card-header{
    font-weight: bold;
}
.chartsBox {
    width: 100%;
    height: 400px;
}
.el-empty {
    width: 100%;
    height: 400px;
}
</style>